<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">{{ t('layout.sideBar.home') }}</el-breadcrumb-item>
      <transition-group name="breadcrumb">
        <template v-if="route.name !== 'Workplace'">
          <el-breadcrumb-item v-for="item in matchedList" :key="item.path">
            {{ item.meta.title }}
          </el-breadcrumb-item>
        </template>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'

const route = useRoute()
const { t } = useI18n()
const matchedList = computed(() => {
  return route.matched.filter((item) => item.meta.title)
})
</script>
<style scoped lang="scss">
.el-breadcrumb {
  font-size: 15px;
}
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s ease;
}
.breadcrumb-enter-from,
.breadcrumb-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
.breadcrumb-leave-active {
  position: absolute;
}
</style>
